<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型</title>
  <style>
    /* 盒子种类：1、w3c盒子 （内容盒子、标准盒子） */
    .contentDiv {
      /* 默认的盒子：content-box */
      box-sizing: content-box;
      /* 这是内容区的宽高 */
      width: 100px;
      height: 100px;
      background-color: red;
      /* 设置内边距 */
      padding: 10px;
      /* 边框 */
      /* border: 1px solid black; */

      /* 设置padding时，往外撑开，盒子宽高发生改变，内容区宽高不变 */
      /* w3c盒子的宽度=width+padding-left+padding-right+border-left+border-right */
      /* w3c盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom */
      margin: 10px
        /* 此时 
      w3c盒子页面所占宽度=w3c盒子的宽度+margin-left+margin-right
      w3c盒子页面所占高度=w3c盒子的高度+margin-top+margin-bottom
      */

        /* 水平居中 */
        /* margin: 0 auto; */

    }

    /* 盒子种类：2 边框盒子 IE盒子 怪异盒子 */
    #borderDiv {
      /* 设置盒模型属性 */
      box-sizing: border-box;
      /* 这是盒子的宽高 */
      width: 100px;
      height: 100px;
      background-color: paleturquoise;
      /* 设置内边距 */
      padding: 10px;
      /* 设置边框 */
      border: 5px solid black;
      /* IE盒子的高度——padding改变时，盒子的宽高不会发生改变，内容区变小（往里挤压）
      width：100（不变）=contentWidth（变小）+padding-left+padding-right+border-left+border-right
      height：100（不变）=contentHeight（变小）+padding-top+padding-bottom+border-top+border-bottom
      */
      margin: 10px;
      /* 此时 
      IE盒子页面所占宽度=IE盒子的宽度+margin-left+margin-right
      IE盒子页面所占高度=IE盒子的高度+margin-top+margin-bottom
      */



    }
  </style>
</head>

<body>
  <div class="contentDiv">我是一个w3c盒子</div>
  <div id="borderDiv">我是边框盒子</div>

  <!-- 面试——说一说盒模型？有哪些区别？
    种类：
    1、w3c盒子/内容盒子/标准盒子 box-sizing:content-box
    2、IE盒子/边框盒子/怪异盒子  box-sizing: border-box;
    区别：
    1、w3c盒子width设置给内容区
    盒子的宽：
    所占页面的宽：

    2、边框盒子的width设置给盒子
    盒子的宽：
    所占页面的宽：


  
  -->


</body>

</html>